<template>
  <div class="item">
    <img :src="item.pic">
    <p>{{item.title}}</p>
    <div class="pf">
      <div class="stat" v-for="i of item.rati" :key="i.id">
        <img v-if="i>=1.5" :src=star />
        <img v-else-if="i>=0.5" :src=ban >
        <img v-else :src=none >
      </div>
      <p> {{ item.rating }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      star:require("../static/star.png"),
      ban:require("../static/ban.png"),
      none:require("../static/none.png")
    }
  },
  props:{
    item:{
      type:Object
    }
  }

}
</script>

<style scoped >
*{
    padding: 0;margin: 0;
}
.item{
    width: 9.2rem;
    height: 16rem;
}
.item img{
    height: 12rem;
    width: 9.2rem;
}
.pf{
    display: flex; 
    align-items: center;
}
.pf p{
    padding-left: 10px;
}
.stat img{
    height: 1rem;
    width: 1rem;
}
</style>